<template>
	<view class="content">
		<view class="header">
			<view class="fiex">
				<view class="banner">
					<!-- <image src="" mode=""></image> -->
					<swiper :indicator-dots="true" :autoplay="true" circular="true" :interval="3000" :duration="1000"
						indicator-color="#fff" indicator-active-color="gray" height="400rpx">
						<swiper-item height="400rpx" v-for="banner in bannerList">
							<view class="swiper-item">
								<image :src="banner" mode=""></image>
							</view>
						</swiper-item>
						<!--  -->
					</swiper>
					<view class="top">
						<view class="top_left" @click="locationShow = true">
							<view class="city">{{text}}</view>
							<uni-icons type="location-filled" size="32rpx" color="#fff"></uni-icons>
						</view>
						<view class="top_right" @click="toSearch">
							<input type="text" placeholder="搜索...">
							<uni-icons class="search" type="search" size="30" color="#b4b4b4"></uni-icons>
						</view>
					</view>

					<!-- 城市列表 -->
					<view class=" location" v-if="locationShow">
						<text v-for="location in locationlist" @click="changeLocation(location)"> {{location}}</text>

					</view>
				</view>

				<view class="tabs">
					<view class="nav">
						<text :class="active == 0 ? 'active':'' " @click="active = 0">推荐</text>
						<text :class="active == 1 ? 'active':'' " @click="active = 1">最新</text>
					</view>

					<view class="change" @click="open">
						筛选
					</view>


				</view>

				<view>
					<uni-popup ref="popup" type="bottom" background-color="#fff">
						<view @click="sortHandler(sort,index)" :class="['sort',{'con':sortIndex == index}]"
							v-for="(sort,index) in sortlist">{{sort}}</view>
					</uni-popup>
				</view>

			</view>
		</view>
		<view class="recommend" v-if="active == 0">
			<view class="list">
				<card-item :worklists='worklists'></card-item>
			</view>
		</view>
		<view class="news" v-if="active == 1">
			<view class="list">
				<card-item :worklists='newlists'></card-item>
			</view>
		</view>



	</view>
</template>

<script>
	import cardItem from "/components/cardItem/cardItem.vue"

	export default {
		data() {
			return {
				active: '0',
				searchValue: '123123',
				worklists: [],
				newlists: [],
				locationShow: false,
				locationlist: [],
				text: "广州",
				sortlist: [
					"全部",
					"前端",
					"PHP",
					"goLang",
					"测试",
					"Java"
				],
				sortIndex: '0',
				bannerList: [
					"/static/images/one.png",
					"/static/images/two.png",
					"/static/images/three.png",
					"/static/images/four.png"
				]
			}
		},
		//注册组件
		components: {
			cardItem
		},
		onLoad() {
			uni.showLoading({
				title: "加载中"
			})

			//推荐列表数据
			uni.request({
					url: 'https://yw.52kfw.cn/api/v1/company/work-list?size=20&isRecommend=1',

				}).then((res) => {
					this.worklists = res.data.data.list;
				}),
				//最新列表数据
				uni.request({
					url: `https://yw.52kfw.cn/api/v1/company/work-list?size=20&isNews=1`,

				}).then((res) => {
					this.newlists = res.data.data.list;
				}),

				//城市列表
				uni.request({
					url: 'https://yw.52kfw.cn/api/v1/company/city-list'
				}).then((res) => {
					this.locationlist = res.data.data
					// console.log(this.locationlist);
				})

			uni.hideLoading()

		},
		methods: {
			changeLocation(text) {
				this.text = text;
				this.locationShow = false;
			},
			toSearch(){
				uni.navigateTo({
					url:"/pages/search/search"
				})
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			dialogToggle(type) {
				this.msgType = type
				console.log(this.$refs.alertDialog);
				this.$refs.alertDialog.open()
			},
			//筛选
			sortHandler(sort, index) {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close(); //关闭对话框
				this.sortIndex = index; //修改选中状态

				if (sort == "全部") {
					uni.request({
							url: 'https://yw.52kfw.cn/api/v1/company/work-list?size=20&isRecommend=1'
						}).then((res) => {
							// console.log(res);
							this.worklists = [...res.data.data.list];
						})
						.catch(() => {
							return;
						});

					uni.request({
							url: `https://yw.52kfw.cn/api/v1/company/work-list?size=20&isNews=1`
						})
						.then((res) => {
							// console.log(res);
							this.newlists = [...res.data.data.list];
						})
						.catch(() => {
							return;
						});
				} else {
					uni.request({
							url: `https://yw.52kfw.cn/api/v1/company/work-list?size=20&isRecommend=1&kw=${sort}`
						}).then((res) => {
							// console.log(res);
							this.worklists = res.data.data.list;
						})
						.catch(() => {
							return;
						});

					uni.request({
							url: 'https://yw.52kfw.cn/api/v1/company/work-list?size=20&isNews=1&kw=' + sort
						})
						.then((res) => {
							// console.log(res);
							this.newlists = res.data.data.list;
						})
						.catch(() => {
							return;
						});
				}
			},


		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		}
	}
</script>

<style lang="scss">
	.content {
		// padding: 0rpx 30rpx;

		/* display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
		box-sizing: border-box;

		.uni-popup::v-deep .uni-popup__wrapper {


			padding: 35rpx 15rpx;
			height: 500rpx;
			background-color: #fff;

			// display: flex;
			// align-items: center;
			// justify-content: space-between;
			// flex-wrap: wrap;
			.sort {
				// padding: 0rpx 60rpx;
				background-color: #eeeeee;
				width: 210rpx;
				height: 70rpx;
				line-height: 70rpx;
				margin-right: 30rpx;
				display: inline-block;
				text-align: center;
				margin-bottom: 30rpx;
				border-radius: 20rpx;

				&.con {
					background-color: #fff;
					border: 2rpx solid #279946;
				}
			}

		}

		.header {
			height: 500rpx;
			z-index: 9999;
		}

		.fiex {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			display: inline-block;
		}

		.banner {
			width: 100%;
			height: 400rpx;
			position: relative;

			swiper {
				height: 100%;
				z-index: 9999;

				swiper-item {
					image {
						height: 400rpx;
						width: 100%;
					}
				}
			}

			.top {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 30rpx;
				position: absolute;
				top: 0rpx;
				left: 0rpx;

				.top_left {
					display: flex;
					align-items: flex-end;


					.city {
						font-size: 32rpx;
						color: #fff;
						font-weight: bold;
						margin-right: 10rpx;
					}
				}

				.top_right {
					position: relative;

					input {
						width: 540rpx;
						height: 60rpx;
						line-height: 60rpx;
						border-radius: 30rpx;
						background-color: #f5f5f5;
						text-indent: 40rpx;
					}

					.search {
						font-size: 32rpx;
						color: #b6b6b6;
						position: absolute;
						top: 0rpx;
						right: 20rpx;
					}
				}
			}

			.location {
				display: flex;
				flex-direction: column;
				justify-content: center;
				// align-items: center;
				width: 200rpx;
				background-color: #fff;
				position: absolute;
				top: 100rpx;
				left: 30rpx;
				// padding: 20rpx 0;
				border-radius: 20rpx;

				text {
					// margin-bottom: 20rpx;
					height: 60rpx;
					line-height: 60rpx;
					width: 200rpx;
					text-align: center;
					font-size: 24rpx;
				}
			}
		}


		.tabs {
			padding: 0rpx 30rpx 0rpx;
			height: 75rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;

			.nav {
				text {
					font-size: 32rpx;
					height: 100%;
					color: #999;
					margin-right: 30rpx;
					padding-bottom: 10rpx;

					&.active {
						color: #279946;
						border-bottom: 4rpx solid #279946;
					}
				}

			}

			.change {
				font-size: 28rpx;
				width: 100rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				border-radius: 10rpx;
				color: #999;
				background-color: #f4f4f4;
			}

		}

		.recommend,
		.news {
			.list {
				padding-bottom: 120rpx;
			}
		}
	}
</style>
